<template>
	<view>
		<view class="TopBox">
			<view class="example-body">
				<view class="tips">
					<text>上传助教图片</text>
				</view>
				<view class="image">
					<uni-file-picker limit="1" :del-icon="true" disable-preview :imageStyles="imageStyles"
						file-mediatype="image" @success="success" @fail="fail" @select="select">点击选择图片</uni-file-picker>
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>名称</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教名称' v-model="name">
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>收费</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教价格' v-model="price">
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>排班</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教排班时间' v-model="time">
					<!-- <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />					 -->
				</view>
			</view>
			<view class="list">
				<view class="left">
					<text>助教号码</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教号码' v-model="barcode">
				</view>
			</view>
			<!-- <view class="list">
				<view class="left">
					<text>助教描述</text>
				</view>
				<view class="right">
					<input type="text" placeholder='请输入助教描述' v-model="description">
				</view>
			</view> -->
			<!-- <view class="textlist">
				<text></text>
			</view> -->
			<view class="addbox">
				<view class="btn" @click="updateGood"> 
					<text>确认修改</text>
				</view>
			</view>
			<view class="deletebox">
				<view class="btn" @click="deleteGood">
					<text>删除</text>
				</view>
			</view>
			<!-- 星期日期选择器 -->
			<jsfun-picker  ref="picker" :listArr="priceList" :defaultArr="priceDefault" type="multiple"
				v-model="showpicker" @click="priceChange">
				<!-- 自定义页面显示元素 -->
			
			</jsfun-picker>
			<!-- 小时分钟选择器 -->
			<!-- <xp-picker ref="Hourpicker" @confirm="Hourconfirm1" mode="hi" :value="ZhouQiStart" />
			<xp-picker ref="Hourpicker1" @confirm="Hourconfirm2" mode="hi" :value="ZhouQiEnd" /> -->
		</view>
	</view>
</template>

<script>
	// import jsfunPicker from '@/components/jsfun-picker/jsfun-picker.vue';
	export default {
		// components: {			
		// 	jsfunPicker,
		// },
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			// const currentDate_end = this.getDate_end({
			// 	format: true
			// })
			return {
				rangeTime: [{StartTime:'2023-12-07 17:22:19',EndTime:'2023-12-14 17:22:19'}],
				imageStyles: {
					width: 164,
					height: 164,
					border: { // 如果为 Boolean 值，可以控制边框显示与否
						color: "#fff", // 边框颜色
						width: "1px", // 边框宽度
						style: "dashed", // 边框样式						
					}
				},
				id: "",
				dataList: [],
				url: '',
				name: "",
				price: '',
				time:'',
				barcode:'',
				description:'',
				// SelectZhouQiList: [{
				// 		text: '每天执行',
				// 		name: '每天执行',
				// 		value: 1,
				// 	},
				// 	{
				// 		text: '每周执行',
				// 		name: '每周执行',
				// 		value: 2,
				// 	},
				// 	{
				// 		text: '每月执行',
				// 		name: '每月执行',
				// 		value: 3,
				// 	},
				// ],
				// ActivityData: {
				// 	note: "",
				// 	storeId: "",
				// 	type: "", // 表示活动类型大类，例如 "vip_active" 表示会员活动
				// 	discount: "", // 表示优惠方式，例如 "Full_amount" 表示满额满减
				// 	startTime: currentDate, // 活动开始和结束时间
				// 	endTime: currentDate_end,
				// 	target: "all", // 表示优惠对象，可以是 "all"（所有人）、"vip"（会员）或 "unvip"（非会员）。
				// 	periodic: "0", // 表示是否开启周期活动，0:否，1：是
				// 	periodType: "", // 表示周期方式，例如按天、按周、按月等
				// 	periodStartTime: "", // 表示周期开始和结束时间
				// 	periodEndTime: "",
				// 	periodDay: "", // 记录周期活动指定的日份或星期的天数
				
				// 	earnPoints: "1", // 表示会员是否获得积分的标识，0:否，1：是
				// 	activityName: "", // 用于记录活动的名称或标题 
				// 	yzsActivityRuleList: [], // 满额满减列表
				// 	joinType: "all", // 可参与类型
				// 	joinList: "", // 可参与列表
				// 	unjoinType: "none", // 不可参与类型
				// 	unjoinList: "", // 不可参与列表
				// },
				// SelectZhouQi: '1', // 当前选择周期方式
				// ZhouQiStart: "00:00", // 周期时间起始时间
				// ZhouQiEnd: '23:59', // 周期时间结束时间
				// ShowZhiXinRiQi: false,
				// showpicker: false,
				// priceList: [],
				// priceDefault: null,
				// IsZhouQi: true,
			};
		},			
		onLoad(e){
			console.log(e);
			this.id=e.id
			this.getGoodDetail()
		},
		methods: {
			async getGoodDetail() {
				const data = {
					storeGoodsId: this.id,
					storeId: uni.getStorageSync('storeId'),
				};
				const {
					data: res
				} = await uni.$http.post(
					`/store/queryStoreGoodsDetail`, data
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				this.name=res.data.name;
				this.price=res.data.salePrice;
				this.time=res.data.vipPrice;
				this.barcode=res.data.barcode;
				// this.description=res.data.description;
				console.log(res.data);
			},
			// getDate(type) {
			// 	const date = new Date();
			// 	let year = date.getFullYear();
			// 	let month = date.getMonth() + 1;
			// 	let month_end = date.getMonth() + 2;
			// 	let day = date.getDate();
			
			// 	if (type === 'start') {
			// 		year = year - 60;
			// 	} else if (type === 'end') {
			// 		year = year + 2;
			// 	}
			// 	month = month > 9 ? month : '0' + month;;
			// 	day = day > 9 ? day : '0' + day;
			// 	return `${year}-${month}-${day}`;
			// },
			//-----------------------------------------------------优惠券结束时间
			// getDate_end(type) {
			// 	const date = new Date();
			// 	let year = date.getFullYear();
			// 	let month = date.getMonth() + 2;
			// 	let day = date.getDate(); /*  */
			
			// 	if (type === 'start') {
			// 		year = year - 60;
			// 	} else if (type === 'end') {
			// 		year = year + 20;
			// 	}
			// 	month = month > 9 ? month : '0' + month;;
			// 	day = day > 9 ? day : '0' + day;
			
			// 	return `${year}-${month}-${day}`;
			// },
			// showpickerClick() { // 星期日期选择
			// 	this.$refs.picker.showPicker()  
			// },
			// changeSelectZhouQi() {
			// 	if (this.SelectZhouQi == 3) { // 每月执行
			
			// 		this.ShowZhiXinRiQi = true
			// 		this.priceList = []
			// 		for (let i = 1; i < 32; i++) {
			// 			this.priceList.push(i)
			// 		}
			// 		this.ActivityData.periodType = "month"
			
			// 	} else if (this.SelectZhouQi == 2) { // 每周执行
			// 		this.ShowZhiXinRiQi = true
			// 		this.priceList = []
			// 		this.priceList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', ]
			// 		this.ActivityData.periodType = "week"
			// 	} else { // 每天执行
			// 		this.ShowZhiXinRiQi = false
			// 		this.ActivityData.periodType = "day"
			// 	}
			// },
			// priceChange(data) {
			// 	console.log("==星期日期选择返回值==");
			// 	console.log(data);
			// 	console.log(data.indexStr);
			// 	console.log(data.textStr);
			
			// 	let numbers = data.indexStr.split(","); // 将字符串拆分为数字数组
			// 	let incrementedNumbers = numbers.map((num) => parseInt(num) + 1); // 遍历数组并加1
			// 	let incrementedString = incrementedNumbers.join(","); // 将数组重新组合为字符串
			
			// 	this.ActivityData.periodDay = incrementedString
			// 	this.priceDefault = incrementedString
			// },
			// Hourconfirm2(e) {
			// 	this.ZhouQiEnd = e
			// 	this.ActivityData.periodEndTime = this.ZhouQiEnd
			// },
			// Hourconfirm1(e) {
			// 	this.ZhouQiStart = e
			// 	this.ActivityData.periodStartTime = this.ZhouQiStart
			// 	console.log('ZhouQiStart', e)
			// },
			// showHourClick(type) {
			// 	if (type == 1) {
			// 		this.$refs.Hourpicker.show()
			// 	} else {
			// 		this.$refs.Hourpicker1.show()
			// 	}
			// },
			async deleteGood(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否删除',
				    success: async function(res) {
						if (res.confirm) {							
							const data = {
								platformGoodsId: that.id,
								storeId: uni.getStorageSync('storeId'),					
							};
							const {
								data: res
							} = await uni.$http.post(
								`/store/deleteStoreGoods`, data
							);
							if (res.code !== 0) return uni.$showMsg(res.message);
							console.log(res.data);
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
							console.log(res, '删除助教成功!');
							uni.$showMsg('删除成功!')
						} else if (res.cancel) {
							console.log('取消删除');
						}
					}
				})
				
				
				
				
			},			
			async updateGood() { 
				const data = {					
					storeId: uni.getStorageSync('storeId'),
					salePrice: this.price,
					imageUrl: this.url,
					name: this.name,
					vipPrice:this.time,
					goodsType:1,
					id:this.id,
				};
				const {
					data: res
				} = await uni.$http.post(
					`/store/addGoodsByBarcode`, data
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data);
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
				console.log(res, '修改成功!');
				uni.$showMsg('修改成功!')
			},
			select(e) {
				let that =this;
				console.log(e);
				uni.uploadFile({
					url: 'https://jkht.wteam.club/common/uploadFile',
					filePath: e.tempFilePaths[0],
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data",
						"Authorization": uni.getStorageSync('token'),
					},
					success: (res) => {
						if (JSON.parse(res.data).code == 200) {
							console.log(JSON.parse(res.data).urls,'图片上传成功!');
							that.url = JSON.parse(res.data).urls;
						} else {
							uni.$showMsg(res.msg);
							console.log(res);
						}
					},
					fail: (res) => {
						uni.$showMsg(res.msg);
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f8fc;
	}
	/deep/ .select-picker-border {
		border: 0 !important;
	}
	/deep/ picker {
		padding-right: 41px;
	}
	.SmallTip {
		color: #89898b;
		width: 100%;
		text-align: left;
		margin-left: 40rpx;
		margin-top: 20rpx;
		margin-bottom: -5rpx;
	}
	.ItemDev {
		padding-right: 41px;
	}
	.ItemDiv {
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		text-indent: 24rpx;
		color: rgba(80, 80, 80, 1);
		font-size: 0.9rem;
		text-align: left;
		background-color: white;
		width: 95%;
		min-height: 82rpx;
		border-radius: 10rpx;
		margin-top: 2vh;
		.ItemTitle {
			display: flex;
			align-items: center;
		}
	}
	.ItemDev {
		padding-right: 41px;
	}
	.RightImg {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 39rpx;
	}
	.ZhouQiStart {
	
		width: 155rpx;
		display: flex;
		justify-content: center;
	
	}
	
	.ZhouQiTime {
		display: flex;
		align-items: center;
	}
	
	.ZhouQiAdd {
		margin-right: 33rpx;
		color: #1f64ff;
	}
	.TopBox {
		padding-bottom: 6vh;
	}

	.deletebox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2vh;
		.btn:active {
			background-color: rgba(225, 0, 0, 0.1);
		}
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #d43030;
			font-size: 4vw;
		}
	}

	.addbox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 7vh;
		.btn:active {
			background-color: rgba(255, 147, 111, 0.1);
		}
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 6vh;
			width: 80%;
			color: #fff;
			background-color: #ff8d1a;
			font-size: 4vw;
		}
	}

	.textlist {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 2vw;
		padding-left: 3vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		input {
			width: 100%;
		}
	}

	

	.list {
		width: 100%;
		height: 7vh;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		.left {
			margin-left: 2vw;
		}

		#right {
			// width: 70vw;
			margin-right: 2vw;
			font-size: 30rpx;
			display: flex;

			input{
				width: 50vw;
			}
		}

		.right {
			// width: 40vw;
			margin-right: 2vw;
			font-size: 30rpx;
			display: flex;

			input{
				width: 50vw;
			}
		}
	}

	.example-body {
		padding: 3vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		// background-color: #fff;
		.image {
			margin-top: 3vh;
			background-color: #fff;
			box-shadow: 2rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
			color: #1a91ff;
		}

	}
</style>